import { View, Text } from "@tarojs/components";
import { XmPullRefresh, XmNavbar, XmImage } from "@/components/tool";
import React, { Fragment, useState } from "react";
import { observer } from "mobx-react";
import { Cell } from "@taroify/core";
import { XmIcon, XmPedometer } from "@/components/ui";
import noticeImg from "@/static/images/notice-img.png";
import { BaseRouter } from "@/path/router";
import dayjs from "dayjs";
import { orderIndex, payIndex, useCommonInit } from "@/path/api/common";
import { onRequestPayment } from "@/path/acrossAPI";
import { TypeCommon, TypeOrderList } from "@/path/api/common/type";
import "./index.scss";
import { chooseTimeDay, onRefund } from "../untils";
import Taro from "@tarojs/taro";
type TypePageRouterCreate = { peopleNum: number, day: Date }
function Index() {
  const routerInfo = BaseRouter.getData<TypePageRouterCreate & TypeOrderList.Item>()
  const [params, setParams] = useState({
    peopleNum: routerInfo?.peopleNum || routerInfo.num || 0,
    day: routerInfo.day || (routerInfo.time ? new Date(routerInfo.time) : void 0) || new Date()
  })
  const { resData: initData } = useCommonInit()

  function onDayTime() {
    chooseTimeDay(params.day, initData).then((res) => {
      onchange("day", res.date)
    })
  }
  function onchange(key: keyof TypePageRouterCreate, ev: TypePageRouterCreate[keyof TypePageRouterCreate]) {
    const _data: TypePageRouterCreate = { ...params }
    _data[key] = ev as any
    setParams(_data)
    BaseRouter.setBackData(_data)
  }
  function onPay() {
    orderIndex({
      num: params.peopleNum,
      time: new Date(params.day).getTime() / 1000
    }).then((res) => {
      return payIndex({ order: res.data })
    }).then((res) => {
      return onRequestPayment(res.data)
    }).then(() => {
      Taro.eventCenter.trigger("enentmineListRefresh")
      BaseRouter.back({ data: "payed" })
    })
  }

  function onOrderRefund() {
    onRefund({
      no: routerInfo.no,
      num: routerInfo.num
    }).then(() => {
      Taro.eventCenter.trigger("enentmineListRefresh")
      BaseRouter.back({ data: "refunded" })
    })
  }
  const _price = (function (data: TypeCommon.returnedVal, day: Date) {
    const _item = (data.special_admission_fee_date || []).find(val => dayjs(day).isBetween(dayjs(val.start_date), dayjs(val.end_date), null, '[]'))
    if (_item) {
      return Number(_item.price || 0)
    }
    return Number(data.price || 0)
  })(initData, params.day)
  return <View className="bg-page">
    <XmNavbar title="购票详情" fixed={false}></XmNavbar>
    <XmPullRefresh className="order-detail-page public-cell" paddingBottom={240} navigationStyle="custom" renderButtom={<View className="btm-btnbox iphonex-bottom">
      <View className="btm-btn1 s-lg-1 f-weight-bold t-center c-white" onClick={onPay}>查询购票</View>
      {(routerInfo.no && routerInfo.refund === 1) ? <View className="btm-btn2 s-md  t-center c-gray-6" btm-btn1 onClick={onOrderRefund}>申请退款</View> : null}
    </View>}>
      <View className="group-body">
        <Cell.Group inset>
          <Cell title={<Text className="s-lg c-gray-6">购票人数</Text>}>
            <View className="flex flex-end s-lg c-black f-weight-bold">
              <XmPedometer value={params.peopleNum} min={1}
                onChange={e => onchange("peopleNum", e === "add" ? params.peopleNum + 1 : params.peopleNum - 1)}></XmPedometer>
            </View>
          </Cell>
          <View className="border-btm"><View className="border"></View></View>
          <Cell title={<Text className="s-lg c-gray-6">购票日期</Text>} onClick={onDayTime}>
            <View className="flex flex-end s-lg c-black f-weight-bold">
              <Text>{dayjs(params.day).format("MM月DD日")} {dayjs(params.day).format("ddd")}&nbsp;&nbsp;&nbsp;&nbsp;</Text>
              <XmIcon icon="arrow-right" size={20}></XmIcon>
            </View>
          </Cell>
          <View className="border-btm"><View className="border"></View></View>
          <Cell title={<Text className="s-lg c-gray-6">成人票</Text>}>
            <View className="flex flex-end s-lg c-gray-7">
              <Text>￥{initData.price || 0} x {params.peopleNum}张</Text>
            </View>
          </Cell>
          <View className="border-btm"><View className="border"></View></View>
          <Cell title={<Text className="s-lg c-gray-6">订单总额</Text>}>
            <View className="flex flex-end s-lg-1-1 c-red f-weight-bold">
              <Text>￥{(_price * params.peopleNum).toFixed(2)}</Text>
            </View>
          </Cell>
        </Cell.Group>
        <View className="notice">
          <View className="box s-lg c-white flex">
            <XmImage className="icon" src={noticeImg} size={48}></XmImage>
            请注意门票使用时间
          </View>
        </View>
      </View>
    </XmPullRefresh>
  </View>
}
const Higher = React.memo(observer(Index));
export default () => <Fragment><Higher /></Fragment>